<template>
  <ContentWrap>
    <el-col :span="24">
      <el-descriptions :column="2">
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="举报编码" />
          </template>
          {{ data.no }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="举报人ID" />
          </template>
          {{ data.reportId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="举报人昵称" />
          </template>
          {{ data.reportName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="被举报人ID" />
          </template>
          {{ data.quiltReport }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="被举报人昵称" />
          </template>
          {{ data.quiltName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="提交时间" />
          </template>
          {{ formatDate(data.createTime) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="举报原因" />
          </template>
          {{ data.reason }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="举报内容" />
          </template>
          {{ data.content }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="联系方式" />
          </template>
          {{ data.mobile }}
        </el-descriptions-item>
      </el-descriptions>

      <div>
        <span class="mr5 inline-block vertical-top">证据截图:</span>
        <template v-for="item in data.evidenceImgList" :key="item.id">
          <el-avatar
            shape="square"
            :size="100"
            v-if="item"
            :src="item.url || '-'"
            class="mr3 inline-block"
          />
        </template>
      </div>
      <div class="mt3">
        <span class="mr5 inline-block vertical-top">证据视频:</span>
        <template v-for="item in data.evidenceVideoList" :key="item.id">
          <el-avatar shape="square" :size="100" :src="item.url" class="mr3 inline-block" />
        </template>
      </div>
    </el-col>
  </ContentWrap>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'

const { data } = defineProps<{ data: any }>()

// 将拼接的字符串分割未数组
const formatList = (data: string) => {
  return data?.split(',') || data
}
</script>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
